<template>
  <div class="yearPicker">
    <a-date-picker
      :value="innerData"
      title="选择年份查询"
      placeholder="选择年份查询"
      style="margin-left: 15px"
      mode="year"
      :open="isOpen"
      format="YYYY"
      :disabledDate="disabledDate"
      @panelChange="
        (v) => {
          panelChange(v)
        }
      "
      @openChange="openChange"
      @change="onChange"
    />
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: {
    year: {
      type: String,
      default: '',
    },
    disabledDateFlag: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    this.innerData = this.year
  },
  data() {
    return {
      innerData: null,
      searchYear: '',
      isOpen: false,
    }
  },
  methods: {
    disabledDate(currentDate) {
      if (this.disabledDateFlag) {
        return currentDate < moment('2019').endOf('year') || currentDate > moment().endOf('year')
      }
      return currentDate > moment().endOf('year')
    },
    openChange(status) {
      if (status) {
        this.isOpen = true
      } else {
        this.isOpen = false
      }
    },
    panelChange(value) {
      this.innerData = value
      this.searchYear = value ? value.format('YYYY') : null
      this.isOpen = false
      this.$emit('yearChange', this.searchYear)
    },
    onChange() {
      this.innerData = null
      this.searchYear = null
      this.$emit('yearChange', this.searchYear)
    },
  },
}
</script>

<style lang="less" scoped>
</style>